import React, { Component } from 'react';
import store from '@/store';
import Banner from './Banner';
import More from './More';
import Blot from './Blot';
import Footer from './Footer';
import Images from './Images';
import Select from './Select';
import Delist from './Delist';
import { List } from 'antd-mobile';
import axios from 'axios';
const Item = List.Item;

class App extends Component {
	constructor (props) {
	  super(props);
		this.state = {
			imgHeight: 380,
			names: '',
			nprice: '',
			oprice: '',
			detailimg: [],
			condata:[],
			size:[],
			color:[]
		}	
	}
  componentDidMount () {
    console.log('detail', this)
    const { id } = this.props.match.params
		console.log(id)
		fetch('/admin/post1/' + id)
			.then(res => res.json())
			.then(data => {
				console.log(data)
				store.dispatch({
					type: 'CHANGE_DETAIL_BANNER',
					data: data.goods_detail_img
				})
				this.setState({
					names: data.goods_name,
					nprice: data.goods_newprice,
					oprice: data.goods_oldprice,
					detailimg: data.goods_detail_img,
					condata:data,
					size: data.goods_size,
					color:data.goods_color
				})
			})
			.catch(err => console.log(err))
			axios.get('/users/goodsradom')
				.then((data) => {
					console.log('list',data.data)
					store.dispatch({
						type: 'CHANGE_DETAIL_LIST',
						data: data.data
					})
				})
  }
	open () {
		document.querySelector('.more').style.display = "block";
		document.querySelector('.blot').style.display = "block";
	}
	selectPage () {
		document.querySelector('.select').style.display = "block";
		document.querySelector('.blot').style.display = "block";
	}
  render() {
    return (
      <div className="container">
        <div className="box2">
					<div className="detail-header">
						<div className="dh-left">
							<span>
								<i className="iconfont icon-left"></i>
							</span>
						</div>
						<div className="dh-right">
							<span>
								<i className="iconfont icon-shouye"></i>
							</span>
							<span>
								<i className="iconfont icon-gouwudai"></i>
							</span>
						</div>
					</div>
				<div className="content">
					<Banner detailbanner = { store.getState().detail.detailbanner } imgHeight = { this.state.imgHeight } />
					<div className="msg">
						<h2>{ this.state.names }</h2>
						<div className="cont">
							<span className="nprice">￥{ this.state.nprice }</span>
							<span className="oprice">
								<i>吊牌价:</i>
								<i>￥{ this.state.oprice }</i>
							</span>
						</div>
					</div>
					<div className="others">
						<ul className="wancheng">
							<li>
								<i className="iconfont icon-wancheng"></i>
								<span>14天退换</span>
							</li>
							<li>
								<i className="iconfont icon-wancheng"></i>
								<span>邦购自换</span>
							</li>
							<li>
								<i className="iconfont icon-wancheng"></i>
								<span>不可用红包</span>
							</li>
						</ul>
						<em className="iconfont icon-more" onClick={ this.open.bind(this) }></em>
					</div>
					<div className="sell">
						<span>促销:</span>
						<i>多买优惠</i>
						<p>1件8折</p>
					</div>
					<List className="my-list">
						<Item arrow="horizontal" onClick={ this.selectPage.bind(this) }>请选择尺码 颜色</Item>
					</List>
					<Images getDetailImg = { this.state.detailimg } getMsg={this.state.condata}/>
					<Delist getDetailList = { store.getState().detail.detaillist }/>
				</div>
			</div>
        <Footer/>
				<More />
				<Select getDetailcon = { this.state.condata }  getSize = { this.state.size } getColor={this.state.color}/>
				<Blot />
      </div>
    );
  }
}

export default App;
